import { useUserStoreWithOut } from "@/store/modules/user"

// interface Options {
//   avatar: string
//   name: string
//   socialPosition: string
//   companyName: string
// }

// const containerWidth = 500
// const containerHeight = 400
// const contentWidth = 468
// const contentHeight = 265
// const avatarWidth = 212
// const margin = 16
// const borderRadius = 12
// const textColor = '#333'

// export default function (options: Options) {
//   const { avatar, name, socialPosition, companyName } = options
//   return {
//     css: {
//       width: containerWidth + 'px',
//       height: containerHeight + 'px',
//     },
//     views: [
//       {
//         src: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/obs/20230809/071f238c8a974b79969115bc61284b7f.png',
//         type: 'image',
//         css: {
//           width: containerWidth + 'px',
//           height: containerHeight + 'px',
//         }
//       },
//       {
//         src: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/obs/20230809/f9b2fba651bb4d93b8f86a38969fb4f1.png',
//         type: 'image',
//         css: {
//           width: contentWidth + 'px',
//           height: contentHeight + 'px',
//           position: 'absolute',
//           left: margin + 'px',
//           top: margin + 'px',
//           borderRadius: borderRadius + 'px'
//         }
//       },
//       {
//         type: 'image',
//         src: avatar || EmptyAvatar,
//         css: {
//           width: avatarWidth + 'px',
//           height: contentHeight + 'px',
//           background: '#fff',
//           objectFit: 'contain',
//           borderRadius: `${borderRadius}px 0 0 ${borderRadius}px`,
//           position: 'absolute',
//           left: margin + 'px',
//           top: margin + 'px',
//           zIndex: 1
//         }
//       },
//       {
//         type: 'view',
//         css: {
//           width: (contentWidth - avatarWidth - margin * 2) + 'px',
//           height: (contentHeight - 24 * 2) + 'px',
//           position: 'absolute',
//           left: (avatarWidth + margin * 2) + 'px',
//           top: (margin + 24) + 'px',
//           zIndex: 1
//         },
//         views: [
//           {
//             type: 'text',
//             text: name,
//             css: {
//               display: "block",
//               lineClamp: 2,
//               paddingBottom: '14px',
//               color: textColor,
//               fontSize: '32px',
//               fontWeight: 'bold'
//             }
//           },
//           {
//             type: 'text',
//             text: socialPosition,
//             css: {
//               display: "block",
//               lineClamp: 2,
//               paddingBottom: '14px',
//               color: textColor,
//               fontSize: '18px'
//             }
//           },
//           {
//             type: 'view',
//             css: {
//               width: '100%',
//               height: '2px',
//               background: '#666664',
//               marginBottom: '14px'
//             }
//           },
//           {
//             type: 'text',
//             text: companyName,
//             css: {
//               display: "block",
//               lineClamp: 3,
//               color: textColor,
//               fontSize: '18px'
//             }
//           }
//         ]
//       },

//     ],
//   }
// }

export function getPersonCardPosterData(data: { title: string, cardImg: string }, codeImg: string): PainterBoard[] {
  const { userInfo } = useUserStoreWithOut()

  return [
    {
      css: {
        width: '800rpx',
      },
      views: [
        {
          type: 'view',
          css: {
            background: '#F2F3F5',
            padding: '40rpx'
          },
          views: [
            {
              type: 'view',
              css: {
                marginBottom: '32rpx'
              },
              views: [
                {
                  type: 'image',
                  src: userInfo.avatar,
                  css: {
                    width: '96rpx',
                    height: '96rpx',
                    borderRadius: '50%',
                    background: '#fff',
                    objectFit: 'cover'
                  }
                },
                {
                  type: 'text',
                  text: `Hi 我是${userInfo.userName} \n${data.title}`,
                  css: {
                    color: '#333',
                    fontSize: '28rpx',
                    lineHeight: '44rpx',
                    marginLeft: '16rpx'
                  }
                },
              ]
            },
            {
              type: 'image',
              src: data.cardImg,
              css: {
                width: '100%',
                height: '576rpx',
                borderRadius: '16rpx',
                objectFit: 'cover'
              }
            }
          ]
        },
        {
          type: 'view',
          css: {
            padding: '40rpx',
            height: '140rpx',
            background: '#fff',
            position: 'relative',
          },
          views: [
            {
              type: 'text',
              text: '微信扫码认识TA >>>',
              css: {
                fontSize: '28rpx',
                color: '#999996',
                marginTop: '40rpx'
              }
            },
            {
              type: 'view',
              css: {
                position: 'absolute',
                right: '40rpx',
                top: '25rpx',
              },
              views: [
                {
                  type: 'image',
                  src: codeImg,
                  css: {
                    width: '160rpx',
                    height: '160rpx',
                  }
                },
              ]
            },
          ]
        },

      ]
    }
  ]
}

export function getBusinessCardPosterData(data: { title: string, cardImg: string }, codeImg: string): PainterBoard[] {
  const { userInfo } = useUserStoreWithOut()

  return [
    {
      css: {
        width: '800rpx',
      },
      views: [
        {
          type: 'view',
          css: {
            background: '#F2F3F5',
            padding: '40rpx'
          },
          views: [
            {
              type: 'view',
              css: {
                marginBottom: '32rpx'
              },
              views: [
                {
                  type: 'image',
                  src: userInfo.avatar,
                  css: {
                    width: '96rpx',
                    height: '96rpx',
                    borderRadius: '50%',
                    background: '#fff',
                    objectFit: 'cover'
                  }
                },
                {
                  type: 'text',
                  text: `Hi 我是${userInfo.userName} \n为您推荐一个公司，快来看看！`,
                  css: {
                    color: '#333',
                    fontSize: '28rpx',
                    lineHeight: '44rpx',
                    marginLeft: '16rpx',
                  }
                },
              ]
            },
            {
              type: 'image',
              src: data.cardImg,
              css: {
                width: '100%',
                height: '576rpx',
                borderRadius: '16rpx',
                objectFit: 'cover'
              }
            }
          ]
        },
        {
          type: 'view',
          css: {
            padding: '40rpx',
            height: '140rpx',
            background: '#fff',
            position: 'relative',
          },
          views: [
            {
              type: 'text',
              text: '微信扫码立即查看 >>>',
              css: {
                fontSize: '28rpx',
                color: '#999996',
                marginTop: '40rpx'
              }
            },
            {
              type: 'view',
              css: {
                position: 'absolute',
                right: '40rpx',
                top: '25rpx',
              },
              views: [
                {
                  type: 'image',
                  src: codeImg,
                  css: {
                    width: '160rpx',
                    height: '160rpx',
                  }
                },
              ]
            },
          ]
        },

      ]
    }
  ]
}